<template>
  <div>
    <Transition>
      <span class="text-danger">{{ name }}</span>
    </Transition>
    <div>
      <input v-focus type="text" />
    </div>
    <div>
      <button @click="show = !show">Toggle</button>
      <Transition>
        <p v-if="show">hello</p>
      </Transition>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  props: {
    msg: String,
  },
  setup(props) {
    const name = ref(props.msg);
    const show = ref(false);

    return {
      name,
      show,
    };
  },
  // directives: {
  //   focus: {
  //     mounted(el) {
  //       el.focus();
  //     },
  //   },
  // },
};
</script>

<style scoped>
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
